<!--  -->
<template>
  <div class="showDataPanel">
    <date-switching-component @getData="getData"/>
    <el-table class="tableView"  :expand-row-keys="expands" :row-key="getRowKeys" :data="dataList"
              @expand-change="expandColumn">
      <el-table-column type="expand" align="center" min-width="40">
        <template #default="props">
          <div class="tableColumnView">
            <historical-data-echarts-panel ref="DailyDosageStatisicsBar"  class="echartsView"/>
            <el-table :data="props.row.dataList">
              <el-table-column prop="dataTime" label="采集时间" align="center"></el-table-column>
              <el-table-column label="冷量" align="center" v-if="showColumn.instantaneousCooling||showColumn.accumulatedCooling||showColumn.consumptionCooling">
                <el-table-column prop="instantaneousCooling" v-if="showColumn.instantaneousCooling" label="瞬时(kWh)" align="center" width="90"/>
                <el-table-column prop="accumulatedCooling" v-if="showColumn.accumulatedCooling" label="累计(kWh)" align="center" width="90"/>
                <el-table-column prop="consumptionCooling" v-if="showColumn.consumptionCooling" label="使用量(kWh)" align="center" width="90"/>
              </el-table-column>
              <el-table-column label="热量" align="center"
                               v-if="showColumn.instantaneousHeat||showColumn.accumulatedHeat||showColumn.consumptionHeat">
                <el-table-column prop="instantaneousHeat" v-if="showColumn.instantaneousHeat" label="瞬时(kWh)" align="center" width="90"/>
                <el-table-column prop="accumulatedHeat" v-if="showColumn.accumulatedHeat" label="累计(kWh)" align="center" width="90"/>
                <el-table-column prop="consumptionHeat" v-if="showColumn.consumptionHeat" label="使用量(kWh)" align="center" width="90"/>
              </el-table-column>
              <el-table-column label="流量" align="center"
                               v-if="showColumn.instantaneousFlow||showColumn.accumulatedFlow||showColumn.consumptionFlow">
                <el-table-column prop="instantaneousFlow" label="瞬时(m³)" v-if="showColumn.instantaneousFlow" align="center" width="90"/>
                <el-table-column prop="accumulatedFlow" label="累计(m³)" v-if="showColumn.accumulatedFlow" align="center" width="90"/>
                <el-table-column prop="consumptionFlow" label="使用量(m³)" v-if="showColumn.consumptionFlow" align="center" width="90"/>
              </el-table-column>
              <el-table-column prop="supplyWaterTemperature" v-if="showColumn.supplyWaterTemperature" :label="'供水温度\n℃'" align="center" width="90"/>
              <el-table-column prop="returnWaterTemperature" v-if="showColumn.returnWaterTemperature" :label="'回水温度\n℃'" align="center" width="90"/>
            </el-table>
          </div>
        </template>
        <template #header>
          <el-popover
              placement="bottom"
              trigger="click"
              :visible="visible">
            <transition name="fade">
              <div class="elPopover">
                <div>选择显示字段</div>
                <div>
                  <el-checkbox v-model="showColumn.instantaneousCooling">瞬时冷量</el-checkbox>
                  <el-checkbox v-model="showColumn.accumulatedCooling">累计冷量</el-checkbox>
                  <el-checkbox v-model="showColumn.consumptionCooling">冷量使用量</el-checkbox>
                  <el-checkbox v-model="showColumn.instantaneousHeat">瞬时热量</el-checkbox>
                  <el-checkbox v-model="showColumn.accumulatedHeat">累计热量</el-checkbox>
                  <el-checkbox v-model="showColumn.consumptionHeat">热量使用量</el-checkbox>
                  <el-checkbox v-model="showColumn.instantaneousFlow">瞬时流量</el-checkbox>
                  <el-checkbox v-model="showColumn.accumulatedFlow">累计流量</el-checkbox>
                  <el-checkbox v-model="showColumn.consumptionFlow">流量使用量</el-checkbox>
                  <el-checkbox v-model="showColumn.supplyWaterTemperature">供水温度</el-checkbox>
                  <el-checkbox v-model="showColumn.returnWaterTemperature">回水温度</el-checkbox>

                </div>
              </div>
            </transition>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button size="mini" type="primary" plain @click="saveColumn">确定</el-button>
            </div>
            <template #reference>
              <svg-icon icon-class="set" class="setSvg" @click="visible = true"/>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="rangeName" label="区域名称" align="center" :render-header="renderHeader"/>
      <el-table-column prop="deviceName" label="设备名称" align="center" :render-header="renderHeader"/>
      <el-table-column prop="deviceNo" label="设备编号" align="center" :render-header="renderHeader"/>
      <el-table-column label="冷量" align="center">
        <el-table-column prop="instantaneousCooling" label="瞬时(kWh)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="accumulatedCooling" label="累计(kWh)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="consumptionCooling" label="使用量(kWh)" align="center" :render-header="renderHeader"/>
      </el-table-column>
      <el-table-column label="热量" align="center">
        <el-table-column prop="instantaneousHeat" label="瞬时(kWh)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="accumulatedHeat" label="累计(kWh)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="consumptionHeat" label="使用量(kWh)" align="center" :render-header="renderHeader"/>
      </el-table-column>
      <el-table-column label="流量" align="center">
        <el-table-column prop="instantaneousFlow" label="瞬时(m³)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="accumulatedFlow" label="累计(m³)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="consumptionFlow" label="使用量(m³)" align="center" :render-header="renderHeader"/>
      </el-table-column>
      <el-table-column prop="supplyWaterTemperature" label="'供水温度℃'" align="center" :render-header="renderHeader"/>
      <el-table-column prop="returnWaterTemperature" label="'回水温度℃'" align="center" :render-header="renderHeader"/>
    </el-table>
  </div>
</template>

<script>
import {setEchartsData} from '../../../utils/public'
let component;
import moment from 'moment';
import DateSwitchingComponent from "@/components/DateSwitchingComponent.vue";
import HistoricalDataEchartsPanel from "@/views/data/components/HistoricalDataEchartsPanel.vue";
import {h} from "vue";
export default {
  data() {
    return {
      visible: false,
      showColumn: {
        instantaneousCooling: true,
        accumulatedCooling: true,
        consumptionCooling: true,
        instantaneousHeat: false,
        accumulatedHeat: false,
        consumptionHeat: false,
        instantaneousFlow: false,
        accumulatedFlow: false,
        consumptionFlow: false,
        supplyWaterTemperature: false,
        returnWaterTemperature: false
      },
      dataList: [],
      queryParams: {
        dateRange: [moment().subtract(1, 'days'), moment()],
        dateType: 'month'
      },
      expands: [], // 只展开一行放入当前行id
      getRowKeys: (row) => { // 获取当前行id
        return row.deviceNo; // 这里看这一行中需要根据哪个属性值是id
      }
    };
  },
  components: {DateSwitchingComponent,HistoricalDataEchartsPanel},
  methods: {
    renderHeader({column}) {
      let realWidth = 0;
      let span = document.createElement('span');

      span.innerText = column.label;
      document.body.appendChild(span);

      realWidth = span.getBoundingClientRect().width;
      column.minWidth = realWidth + 40; // 可能还有边距/边框等值，需要根据实际情况加上

      document.body.removeChild(span);
      return h('span', column.label);
    },
    expandColumn(row, expandedRows) {
      // 每次只展开一行
      if (expandedRows.length) {
        component.expands = []
        if (row) {
          component.expands.push(row.deviceNo);
          component.showChartsData=row.chart;
          setEchartsData(component);
        }
      } else {
        component.expands = []
      }
    },
    saveColumn() {
      //持久化存储
      localStorage.setItem("historyHeatAndCoolMeter", JSON.stringify(this.showColumn))
      this.visible = false;
      if(component.expands.length==0) return;
      setEchartsData(component);
    },
    getData(data, type) {
      this.queryParams.dateRange = data;
      this.queryParams.dateType = type;
      this.$emit('getData');
    }
  },
  mounted() {
    component = this;
    if (localStorage.getItem("historyHeatAndCoolMeter")) {
      this.showColumn = JSON.parse(localStorage.getItem("historyHeatAndCoolMeter"))
    } else {
      this.showColumn = {
        instantaneousCooling: true,
        accumulatedCooling: true,
        consumptionCooling: true,
        instantaneousHeat: false,
        accumulatedHeat: false,
        consumptionHeat: false,
        instantaneousFlow: false,
        accumulatedFlow: false,
        consumptionFlow: false,
        supplyWaterTemperature: false,
        returnWaterTemperature: false
      };
    }
  }
}

</script>
<style lang='scss'>
</style>